<template>
	<view class="clearfix bai">
		<view class="rec-title clearfix left bai">
			<label @click="getDataList('video')" :style="type=='video'?'color:#2979ff':'#151b26'">视频</label>
			<label @click="getDataList('image')" :style="type=='image'?'color:#2979ff':'#151b26'">图片</label>
		</view>
		
		<view class="rec-content bai left clearfix">
			 <zmt-waterfall  :list="list"></zmt-waterfall>
		</view>
	</view>
</template>

<style scoped>
	.rec-title label:hover{color:#2979ff;}
	.rec-title label{margin-right:20px;cursor:pointer;}
	.rec-item{width:200px;height:200px;background:#efefef;}
	.rec-title{line-height:40px;color: #151b26;font-size: 20px;font-weight: 600;line-height: 32px;}
</style>

<script>
	var db = uniCloud.database();
	export default {
		name:"recommend",
		data() {
			return {
				type:'video',
				list: []
			};
		},
		mounted() {
			this.getDataList();
		},
		methods:{
			handleImageLoaded() {
			      this.$refs.waterfall.calcColumns()
			    },
			//获取数据
			getDataList(type = false){
				var that = this;
				if(!type){
					type = 'video';
				}
				that.type = type;
				db.collection('create_result').where({type:type,is_publish:true}).field('_id,content,video_url,webp_url,webp_static_url,size,proportion,type').orderBy('create_date desc').limit(30).get().then(res=>{
					var data = res.result.data;
					this.list = data;
				});
			}
		}
	}
</script>
